import react from 'react'
import './index.css'
const LiveButton:react.FC<LiveButtonProps> = (props: LiveButtonProps) => {
  const state = {
    name: props.children,
    color: props.color ? props.color : '#409eff',
    circle: props.circle ? props.circle : false,
    width: props.width ? props.width : '',
    height: props.height ? props.height : '',
  }
  const { name, color, circle, width, height } = state
  const click = (e: any) => {
    props.onClick(e)
  }
  return (
    <button className='btn' style={
      {
        backgroundColor: color,
        borderRadius: circle ? '100px' : '',
        width,
        height
      }


    }

      onClick={click}
    >
      <span
        style={{
          borderRadius: circle ? '100px' : ''
        }}
        className='after'></span>
      {name}
    </button>
  )
}

export default LiveButton
// class liveButton extends react.Component<LiveButtonProps> {
//   state: Readonly<LiveButtonProps>;
//   constructor(props: LiveButtonProps) {
//     super(props)
//     // 参数参考文档
//     this.state = {
//       name: props.children,
//       color: props.color ? props.color : '#409eff',
//       circle: props.circle ? props.circle : false,
//       width: props.width ? props.width : '',
//       height: props.height ? props.height : '',
//     }
//   }
//   render(): react.ReactNode {
//     const { name, color, circle, width, height } = this.state
//     return (
//       <button className='btn' style={
//         {
//           backgroundColor: color,
//           borderRadius: circle ? '100px' : '',
//           width,
//           height
//         }


//       }

//         onClick={this.click}
//       >
//         <span
//           style={{
//             borderRadius: circle ? '100px' : ''
//           }}
//           className='after'></span>
//         {name}
//       </button>
//     )
//   }
//   // 按钮点击事件
//   click = (e: any) => {
//     this.props.onClick(e)
//   }
// }